<template>
  <view class="category-wrapper">
    <view class="span-item" :class="[classPrefix?classPrefix+'-item':'',type === '-'?'selected':'']"
          @click="selectType('-')">支出</view>
    <view class="span-item" :class="[classPrefix?classPrefix+'-item':'',type === '+'?'selected':'']"
          @click="selectType('+')">收入</view>
  </view>
</template>

<script>

export default {
  props: {
    type: {
      type: String,
      default: ''
    },
    classPrefix: {
      type: String,
      default: ''
    }
  },
  methods: {
    selectType(type) {
      if (type !== '-' && type !== '+') {
        return
      }
      this.$emit('update:type', type)
    }
  }
}
</script>

<style lang="scss" scoped>
  .category-wrapper {
    font-size: 32rpx;
    padding: 6rpx 0;
    display: flex;
    justify-content: center;

    .span-item {
      margin-left: 16rpx;
      line-height: 66rpx;
      height: 66rpx;
      padding: 0 28rpx;
      color: #333;
    }

    .selected {
      background-color: $uni-color-btn;
      border: none;
      color: white;
      border-radius: 8rpx;
    }

  }

</style>
